<template>
    <div class="chat">
        <ChatNav></ChatNav>

        <!-- 顶部搜索栏 -->
        <div class="search-wrap">
            <el-input class="s-inp" placeholder="请输入要查询的聊天室信息" v-model="searchCondition.chatTitle"
                @keyup.enter.native="searchConfirm()" clearable size="midium">
            </el-input>
            <el-button class="s-btn" type="search" @click="searchConfirm()">
                <i class="el-icon-search"></i>
                <span class="search_title">搜索</span>
            </el-button>
            <el-button class="getMyChat" type="search" @click="searchMyChat()">
                <span>管理我创建的聊天室</span>
            </el-button>
        </div>

        <!-- 聊天室列表 -->
        <div v-show="chatListYes">
            <div class="chat-list">
                <!-- item-hover\enter() 的意思是高亮显示 -->
                <chat-item class="chat-item" v-for="(item, index) in chatList" :index="index.toString()" :key="index"
                    :chat="item" :userChatList="userChatList" :managerList="managerList">
                </chat-item>
            </div>

            <!-- 分页功能 -->
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
                @size-change="handleSizeChange" :current-page="searchCondition.currentPage"
                :page-size="searchCondition.currentSize" :pager-count="11" :page-sizes="[20, 50, 200]"
                :total="mainDataListLength">
            </el-pagination>
        </div>

        <div class="chat-list-no" v-show="!chatListYes">
            <img src="@/assets/img/no-data.png" alt="" />
        </div>
    </div>
</template>

<script>
import { pageListChat } from "@/api/other/chat";
import { getUserChats } from "@/api/other/chatUser";

import ChatItem from "@/views/chat/ChatItem";
import ChatNav from "@/views/chat/ChatNav";

export default {
    name: "ChatList",
    components: {
        ChatItem,
        ChatNav,
    },
    data() {
        return {
            userId: this.$store.getters.userInfo.id,
            // 聊天室列表
            chatList: [],
            // 用户加的聊天室
            userChatList: [],
            // 当前用户为管理员的聊天室
            managerList: [],
            // 判断是否有数据 显示没有数据图片
            chatListYes: true,
            mainDataListLength: 0,
            // 列表查询接口的搜索条件
            searchCondition: {
                chatTitle: "",
                chatManagerId: "",
                currentPage: 1,
                currentSize: 20,
            },
        }
    },
    created() {
        this.getData();
        this.getUserChats();
    },

    methods: {
        // 获取内容数据
        async getData() {
            const { data: res } = await pageListChat(this.searchCondition);
            console.log(res.data);
            if (res.data.total === 0) {
                this.chatListYes = false;
            } else {
                this.chatListYes = true;
                this.chatList = res.data.list;
                this.mainDataListLength = res.data.total;
                // 获取该用户是管理员的聊天室
                for (var i = 0; i < this.chatList.length; i++) {
                    if (this.chatList[i].chatManagerId == this.userId) {
                        this.managerList.push(this.chatList[i].id);
                    }
                }
                console.log("用户是管理员的聊天室：" + this.managerList);
            }
        },
        // 获取用户的聊天室
        async getUserChats() {
            const { data: res } = await getUserChats(this.userId);
            for (var i = 0; i < res.data.length; i++) {
                this.userChatList.push(res.data[i].chatId);
            }
            console.log("用户所在的聊天室：" + this.userChatList);
        },

        // 确定搜索
        searchConfirm() {
            if (this.searchCondition.chatTitle == "请输入要查询的聊天室信息" || this.searchCondition.chatTitle == "") {
                this.$message.warning('请输入要查询的聊天室信息!');
                return;
            } else if (this.searchCondition.chatTitle == this.$router.history.current.query.keyword) {
                return;
            }
            this.getData();
        },
        searchMyChat() {
            this.searchCondition.chatManagerId = this.userId;
            this.getData();
            this.searchCondition.chatManagerId = "";
        },

        // 当前页发生改变
        handleCurrentChange(val) {
            this.searchCondition.currentPage = val;
            this.getData();
        },
        handleSizeChange(val) {
            this.videoSearch.currentSize = val;
            this.getData();
        },
    },
}
</script>

<style>
.chat {
    width: 1000px;
    margin: 0 auto;
}

.search-wrap {
    display: flex;
    width: 1000px;
    /* margin: 0 auto; */
    margin-top: 30px;
}

.s-inp {
    /* flex: 1; */
    width: 300px;
}

.s-btn {
    width: 100px;
    height: 40px;
    margin-left: 10px;
    font-size: 16px;
}

.search_title {
    margin-left: 5px;
}

.getMyChat {
    /* width: 180px; */
}

/* 视频内容 */
.chat-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.chat-item {
    margin-top: 20px;
    margin-right: 25px;
}

/* 分页 */
.el-pagination {
    margin: 40px;
    text-align: center;
    background: "#00a1d6";
}

.chat-list-no {
    margin: 50px;
    text-align: center;
}
</style>


